<template>
  <div class="page-title">
    <img :src="titleImg" class="title-bottom-image" alt="" />
    <div class="left">
      <div class="title_bom" :class="{ curr_title_bom: index === 0 }"></div>
      <div class="title_bom" :class="{ curr_title_bom: index === 1 }"></div>
      <div class="title_bom" :class="{ curr_title_bom: index === 2 }"></div>
    </div>
    <div class="right">
      <div class="title_bom" :class="{ curr_title_bom: index === 0 }"></div>
      <div class="title_bom" :class="{ curr_title_bom: index === 1 }"></div>
      <div class="title_bom" :class="{ curr_title_bom: index === 2 }"></div>
    </div>
    <div class="title-text color-text pangmen">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleImg: '',
      index: 0,
    };
  },
  props: {
    src: {
      type: String,
      default: '',
    },
  },
  created() {
    this.titleImg = require(`@/assets/${this.src}`);
    this.animationFun();
  },
  methods: {
    animationFun() {
      setInterval(() => {
        this.index++;
        if (this.index > 2) {
          this.index = 0;
        }
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
.page-title {
  position: relative;
  width: 100%;
  height: 100%;

  .title-text{
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: vh(48);
    // font-weight: bold;
  }
  .title-bottom-image {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .left,
  .right {
    display: flex;
    width: vw(80);
    justify-content: space-between;
  }
  .left {
    position: absolute;
    top: vh(47);
    left: vw(500);
  }
  .right {
    position: absolute;
    top: vh(47);
    right: vw(500);
    transform: rotate(180deg);

    .title_bom {
      transform: rotateY(-180deg);
    }
  }
  .title_bom {
    flex: 1;
    height: vh(19);
    background-image: url('../../assets/home/page_title_bom.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .curr_title_bom {
    background-image: url('../../assets/home/page_title_bom2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
